<script lang="ts" setup>
import { ref, defineEmits, watch } from 'vue'
import { Search } from "@element-plus/icons-vue";

const input = ref('')
const selectValue = ref('最新')
const ecologyList = ref() as any

const props = defineProps({
    list: Array
})

watch(() => props.list, (newValue) => {
    ecologyList.value = newValue
})

const emit = defineEmits(["goDetail", "goSearch", "goClearKeyword"])
const handleGoDetial = (val: number) => {
    emit("goDetail", val)
}

const handleSearch = (val: any) => {
    emit("goSearch", val)
}

const handleClearKeyword = () => {
    emit("goClearKeyword")
}
</script>

<template>
    <div class="ecologyBoxRight">
        <div class="ecologyBoxRightHeader flex justify_between  bgfff">
            <div>
                <el-input class="w-50 m-2" placeholder="搜索" v-model="input" :clearable="true" :prefix-icon="Search"
                    @change="handleSearch" @clear="handleClearKeyword" />
            </div>
            <div>
                <el-select v-model="selectValue" placeholder="Select">
                    <el-option :label="'最新'" :value="'最新'" />
                </el-select>
            </div>

        </div>
        <div class="ecologyBoxRightContent">
            <div class="ecology_box pointer" v-for="item in ecologyList" :key="item.id" @click="handleGoDetial(item.id)">
                <el-row justify="space-between">
                    <el-col :span="8" :xs="0">
                        <el-image :src="item.images" style="object-fit: cover"></el-image>
                    </el-col>
                    <el-col :span="15" :xs="24">
                        <div class="flex">
                            <el-image class="ecology_image" :src="item.cover_image"></el-image>
                            <div class="flex-1">
                                <div class="ecology_name secondTitle">{{ item.name }}</div>
                                <div class="ecology_company contentText">{{ item.supplier_name }}</div>
                                <div class="ecology_tag">
                                    <el-tag v-for="tagItem in item.category_name" :key="tagItem" effect="plain" round>
                                        {{ tagItem }}
                                    </el-tag>
                                </div>
                            </div>
                        </div>
                        <div class="ecology_des contentText">{{ item.descr }}</div>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.ecologyBoxRight {
    width: 70%;

    .ecologyBoxRightHeader {
        padding: 15px 36px;
        border-radius: 10px;

        .el-input {
            width: 400px;

            :deep(.el-input__wrapper) {
                background-color: #f5f5f7ff;
            }

            :deep(.el-input .el-input__icon) {
                color: #404040ff;
            }

            :deep(.el-input__inner) {
                color: #404040ff;
            }

            :deep(.el-input__wrapper.is-focus) {
                box-shadow: 0 0 0 0 !important;
            }
        }

        .el-select {
            :deep(.el-input) {
                width: 200px;
                font-size: $tabs;

                .el-input__wrapper {
                    box-shadow: 0 0 0 0 !important;
                }

                .el-input__inner {
                    text-align: right;
                    margin-right: 10px;
                }

                .el-select__caret.el-icon {
                    font-size: $tabs;
                    color: #172E59;
                }
            }
        }
    }

    .ecologyBoxRightContent {
        .ecology_box {
            background-color: #fff;
            width: 100%;
            margin-top: 25px;
            padding: 32px 33px;
            border-radius: 10px;

            .ecology_image {
                width: 100px;
                height: 100px;
                border-radius: 10px;
            }

            .ecology_name {
                margin-left: 22px;
            }

            .ecology_company {
                margin: 8px 0 11px 22px;
            }

            .ecology_tag {
                margin-left: 22px;

                :deep(.el-tag) {
                    color: #064DD6;
                    border-color: #064DD6;
                    margin-right: 10px;
                    padding: 0 15px;
                }
            }

            .ecology_des {
                margin-top: 24px;
            }
        }
    }
}

@media screen and (max-width: 1200px) {
    .el-input {
        width: 300px !important;
    }
}

@media screen and (max-width: 450px) {
    .el-input {
        width: 200px !important;
    }
    .ecologyBoxRight {
        width: 100%;

        .ecologyBoxRightHeader {
            margin-top: 20px;
            padding: 22px 18px;

            .el-select {
                :deep(.el-input) {
                    width: auto !important;
                    font-size: $tabs;
                }
            }
        }

        .ecology_box {
            padding: 22px 18px !important;
        }


    }
}
</style>